<template>
  <div class="tel_prefix_code_com">
    <div class="code_sel">{{selectedCode.code?'+'+selectedCode.code:''}}</div>
    <select class="code_list" @change="handleChange" v-model="selectedCode">
      <option v-for="(item,index) in codeList" :key="index" :value="item">{{item.code}} {{item.cn}}</option>
    </select>
    <!-- <div class="v_divider"></div> -->
  </div>
</template>

<script>
import CONST from "../util/const";
export default {
  name: "telCountryCode",
  components: {},
  props: {
    list: {
      type: Array,
      value: () => null
    },
    defaultCode: {
      type: Object,
      value: {
        code: ""
      }
    }
  },
  data() {
    return {
      codeList: [],
      selectedCode: {}
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleChange: function() {
      this.$emit("change", this.selectedCode);
    },
    fetchTelCode: function() {
      // return Promise.resolve(CONST.XC_COUNTRY_AREA_CODE_LIST);
      return axios.get(this.API.GET_AREA_TEL_CODE + "?loading=true");
    },
    initDefaultCode: function() {
      this.selectedCode = this.defaultCode || this.codeList[0];
      this.handleChange();
    }
  },
  created() {},
  mounted() {
    this.$nextTick(function() {
      if (this.list) {
        this.codeList = this.list;
        this.initDefaultCode();
      } else {
        this.fetchTelCode().then(res => {
          this.codeList = res.data;
          this.initDefaultCode();
        });
      }
    });
  },
  destroyed() {}
};
</script>
<style lang="scss" scoped>
.tel_prefix_code_com {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 200px;
  height: 50px;
  overflow: hidden;
  .code_sel {
    height: 100%;
    line-height: 50px;
    font-size: 32px;
    color: #333333;
    width: 100%;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    &::after {
      content: "▼";
      font-size: 24px;
    }
  }
  .code_list {
    border: none;
    outline: none;
    position: absolute;
    opacity: 0;
  }
  .v_divider {
    background: #3b99fc;
    height: 44px;
    width: 3px;
    position: absolute;
    right: 6px;
  }
}
</style>